<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width">
	<script src="js/rem.js"></script>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery3.2.1.min.js"></script>
	<script src="js/index.js"></script>
</head>
<body>

<div class="weatherPage">
	<!-- 天气顶部页面开始 -->
	<header>
		<h1 class="top-bar">
			北京市
		</h1>
		<div class="breathPollute">
			<p>空气</p>
			<p>轻度污染</p>
		</div>
		<h1 class="temperature">10°</h1>
		<h2 class="weather">晴</h2>
		<h2 class="humidity"><span>湿度</span><span>57%</span></h2>
		<h2 class="markedWords">你若安好，便是晴天～</h2>
	</header>
	<!-- 天气顶部页面结束 -->

	<!-- 今天 明天天气开始 -->
	<div class="todayAndTommWeather">
		<div class="today">
			<div class="today-top">
				<div class="today-top-left">
					今天
				</div>
				<div class="today-top-right">
					<span>17</span>
					<span>/</span>
					<span>3°</span>
				</div>
			</div>
			<div class="today-bottom">
				<div class="today-bottom-left">
					晴转多云
				</div>
				<div class="today-bottom-right">
				</div>
			</div>
		</div>

		<div class="tomm">
			<div class="today-top">
				<div class="today-top-left">
					明天
				</div>
				<div class="today-top-right">
					<span>17</span>
					<span>/</span>
					<span>5°</span>
				</div>
			</div>
			<div class="today-bottom">
				<div class="today-bottom-left">
					多云
				</div>
				<div class="today-bottom-right">
				</div>
			</div>

		</div>
	</div>
	<!-- 今天 明天天气结束 -->
	<!-- 24小时天气开始 -->
	<div class="oneDayWeather">
		<div class="content">
			<!-- <div class="weatherList">
				<p class="weatherTime">21:00</p>
				<p class="weatherLogo"></p>
				<p class="timeTemperature">9°</p>
			</div> -->
		</div>
	</div>
	<!-- 24小时天气结束 -->

	<!-- 一周天气开始 -->
	<div class="oneWeekWeather">
		<div class="content">
			<div class="weatherList">
				<p>昨天</p>
				<p><span>03</span>/<span>21</span></p>
				<p>多云</p>
				<p></p>
				<p>29°</p>
				<p>1°</p>
				<p></p>
				<p>阴</p>
				<p>南风</p>
				<p>三级</p>
			</div>									
		</div>
	</div>
	<!-- 一周天气结束 -->
	
	<!-- 功能列表开始 -->
		<div class="func">
			<div class="func-block">
				<p><img src="img/func1.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func2.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func3.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func4.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func5.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func6.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func7.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
			<div class="func-block">
				<p><img src="img/func8.png" alt=""></p>
				<p>较冷</p>
				<p>穿衣</p>
			</div>
		</div>
	<!-- 功能列列表结束 -->
</div>




	<!-- 城市页面开始 -->
	
	<div class="city">
		<div class="search">
			<div class="search-box">
				<div class="search-img">
				</div>
				<input type="text" name="" id="" placeholder="搜索地区/景点">
			</div>
			<div class="cancel">取消</div>
		</div>
		<div class="hot-city">
<!-- 		<p>热门城市</p>
			<div class="hot-city-info">
				<ul>
					<li>上海</li>
				</ul>
			</div>
			<p>热门景点</p>
			<div class="hot-scenic-info">
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div> -->
		</div>

	</div>

	<!-- 城市页面结束 -->
	

</body>
</html>

